<template>
  <div id="app" style="background-color: #d3dce6">
    <div style="background-color: white">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">航拍无人机</el-menu-item>
        <el-submenu index="2">
          <template slot="title">手持拍摄设备</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3">商用产品及方案</el-menu-item>
        <el-menu-item index="4">增值服务</el-menu-item>
        <el-menu-item index="4">创意周边</el-menu-item>
        <!--搜索框开始-->
        <div style="float: right;margin-top: 15px">
          <el-input size="mini" @keydown.native.enter="search()" v-model="wd" placeholder="请输入关键字搜索"></el-input>
          <el-button style="position: absolute;
                        background-color: rgba(0,0,0,0);border: 0;right: 0;top: 11px" @click="search()"
                     icon="el-icon-search"></el-button>
        </div>
        <!--搜索框结束-->
      </el-menu>

      <div id="d_1" style="width: 1200px;height: 108px;margin: 0 auto;">
        <a href="">
          <div id="d1_1"><img src="../list/imgs/d1.png" style="width: 100%;height: 100%"></div>
        </a>
        <a href="">
          <div id="d1_2"><img src="../list/imgs/d2.png" style="width: 100%;height: 100%"></div>
        </a>
        <a href="">
          <div id="d1_3"><img src="../list/imgs/d3.png" style="width: 100%;height: 100%"></div>
        </a>
        <a href="">
          <div id="d1_4"><img src="../list/imgs/d4.png" style="width: 100%;height: 100%"></div>
        </a>
        <a href="">
          <div id="d1_5"><img src="../list/imgs/d5.png" style="width: 100%;height: 100%"></div>
        </a>
        <a href="">
          <div id="d1_6"><img src="../list/imgs/d6.png" style="width: 100%;height: 100%"></div>
        </a>
        <a href="">
          <div id="d1_7"><img src="../list/imgs/d7.png" style="width: 100%;height: 100%"></div>
        </a>
        <a href="">
          <div id="d1_8"><img src="../list/imgs/d8.png" style="width: 100%;height: 100%"></div>
        </a>
        <a href="">
          <div id="d1_9"><img src="../list/imgs/d9.png" style="width: 100%;height: 100%"></div>
        </a>
        <a href="">
          <div id="d1_10"><img src="../list/imgs/d10.png" style="width: 100%;height: 100%"></div>
        </a>
      </div>
    </div>
    <div class="line"></div>
    <!--轮播图开始-->
    <div class="block">
      <span class="demonstration"></span>
      <el-carousel height="480px">
        <el-carousel-item v-for="item in bannerArr" :key="item">
          <img :src="item.url" style="width: 100%;height: 100%" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--轮播图结束-->

    <!--商品1展示开始-->
    <div id="show_1">
      <div id="left_1"><img src="../list/imgs/h1.png" style="width: 100%;height: 100%" @click="cart()"></div>
      <div id="in_1"><img src="../list/imgs/h2.png" style="width: 100%;height: 100%"></div>
      <div id="right_1"><img src="../list/imgs/h3.png" style="width: 100%;height: 100%"></div>

      <div id="left_3"><img src="../list/imgs/h4.png" style="width: 100%;height: 100%"></div>
      <div id="right_3"><img src="../list/imgs/h5.png" style="width: 100%;height: 100%"></div>
    </div>
    <!--商品1展示结束-->
    <h1>航拍无人机</h1>
    <!--商品2展示开始-->
    <div class="show_2">

      <div class="left2_1"><img src="../list/imgs/h6.png" style="width: 100%;height: 100%"></div>
      <div class="right2_1"><img src="../list/imgs/h6.png" style="width: 100%;height: 100%"></div>

      <!--商品列表开始-->
      <el-row :gutter="20">
        <el-col :span="6" v-for="p in productArr" :key="p">
          <el-card style="margin: 10px">
            <div>
              <a :href="'/detail.html?id='+p.id">
                <img class="p_img" :src="p.goodsPicture" width="230" height="230" alt="">
              </a>
            </div>
            <div>
              <a style="color: #3f3f3f;text-decoration: none"
                 :href="'/detail.html?id='+p.id">
                <p style="font-size: 15px;margin-top: 0;height: 38px">{{ p.goodsName }}</p>
              </a>
              <div style="color: #6c6c6c">
                <span>￥{{ p.goodsPrice }}</span>
                <span style="float: right">{{ p.goodsIntroduce }}</span>
              </div>
              <el-button type="primary" style="background-color: #62AFFF ;border: none">立即购买</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--商品列表结束-->

    </div>
    <!--商品2展示结束-->


    <!--增值服务开始-->
    <h1>增值服务</h1>
    <div id="under">
      <div id="u_1"><img src="../list/imgs/h15.png" style="width: 100%;height: 100%"></div>
      <div id="u_2"><img src="../list/imgs/h16.png" style="width: 100%;height: 100%"></div>
      <div id="u_3"><img src="../list/imgs/h17.png" style="width: 100%;height: 100%"></div>
      <div id="u_4"><img src="../list/imgs/h18.png" style="width: 100%;height: 100%"></div>
    </div>
    <!--增值服务开始-->
    <!--结束部分开始-->
    <div id="foot">
      <div class="f_1"><img src="../list/imgs/h19.png" style="width: 100%;height: 100%"></div>
      <div class="f_2"><img src="../list/imgs/h20.png" style="width: 100%;height: 100%"></div>
      <div class="f_3"><img src="../list/imgs/h21.png" style="width: 100%;height: 100%"></div>
      <div class="f_4"><img src="../list/imgs/h22.png" style="width: 100%;height: 100%"></div>
    </div>
    <!--结束部分结束-->
    <el-divider></el-divider>
    <div id="foot_2">
      <div class="f_1">
        <a href=""><p>热门产品分类</p></a>
        <a href=""><p>航拍无人机</p></a>
        <a href=""><p>手持拍摄设备</p></a>
        <a href=""><p>商用产品及方案</p></a>
        <a href=""><p>增值服务</p></a>
      </div>
      <div class="f_2">
        <a href=""><p>帮助与支持</p></a>
        <a href=""><p>支付方式</p></a>
        <a href=""><p>订单帮助</p></a>
        <a href=""><p>发货和物流</p></a>
        <a href=""><p>退换货条款</p></a>
        <a href=""><p>技术支持</p></a>
        <a href=""><p>维修中心</p></a>
        <a href=""><p>售后服务政策</p></a>

      </div>
      <div class="f_3">
        <a href=""><p>商品项目</p></a>
        <a href=""><p>Q币返利计划</p></a>
        <a href=""><p>以旧换新</p></a>
        <a href=""><p>商城APP</p></a>
      </div>
      <div class="f_4">
        <a href=""><p>探索精彩</p></a>
        <a href=""><p>天空之城</p></a>
        <a href=""><p>社区</p></a>
        <a href=""><p>购机指南</p></a>
        <a href=""><p>安全飞行指引</p></a>
        <a href=""><p>环球飞行指南</p></a>
      </div>
    </div>
    <el-divider></el-divider>
    <p>Copyright © 2022 DJI 大疆创新 版权所有隐私权政策使用条款粤ICP备12022215号-11营业执照网站地图</p>
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
    </el-menu>

  </div>
</template>

<style>
p {
  font-size: 12px;
  color: #3b3e40;
}

a {
  text-decoration: none;
}

#d1_1 {
  width: 120px;
  height: 108px;
  float: left;
}

#d1_2 {
  width: 120px;
  height: 108px;
  float: left;
}

#d1_3 {
  width: 120px;
  height: 108px;
  float: left;
}

#d1_4 {
  width: 120px;
  height: 108px;
  float: left;
}

#d1_5 {
  width: 120px;
  height: 108px;
  float: left;
}

#d1_6 {
  width: 120px;
  height: 108px;
  float: left;
}

#d1_7 {
  width: 120px;
  height: 108px;
  float: left;
}

#d1_8 {
  width: 120px;
  height: 108px;
  float: left;
}

#d1_9 {
  width: 120px;
  height: 108px;
  float: left;
}

#d1_10 {
  width: 120px;
  height: 108px;
  float: left;
}

#show_1 {
  width: 1200px;
  height: 962px;
  margin: 40px auto;
  background-color: #d3dce6;

}

#left_1 {
  width: 390px;
  height: 547px;
  float: left;
  margin-right: 15px;
  background-color: brown;
}

#in_1 {
  width: 390px;
  height: 547px;
  float: left;
  background-color: bisque;
}

#right_1 {
  width: 390px;
  height: 547px;
  float: right;
  background-color: springgreen;
}

#left_3 {
  height: 400px;
  width: 592px;
  float: left;
  background-color: springgreen;
  margin-top: 15px;
}

#right_3 {
  height: 400px;
  width: 592px;
  float: right;
  background-color: black;
  margin-top: 15px;
}

.show_2 {
  width: 1200px;
  height: 1270px;
  background-color: #d3dce6;
  margin: 0 auto;
}

.left2_1 {
  width: 600px;
  height: 400px;
  background-color: black;
  float: left;
}

.right2_1 {
  width: 600px;
  height: 400px;
  background-color: aqua;
  float: right;
}

.i_1 {
  width: 1200px;
  height: 420px;
}

.i_2 {
  width: 1200px;
  height: 420px;
}

.in2_1 {
  width: 280px;
  height: 420px;
  float: left;
  background-color: greenyellow;
  margin: 15px 0px;
}

.in2_2 {
  width: 280px;
  height: 420px;
  float: left;
  background-color: brown;
  margin: 15px 25px;
}

.in2_3 {
  width: 280px;
  height: 420px;
  float: left;
  background-color: pink;
  margin: 15px 0px;
}

.in2_4 {
  width: 280px;
  height: 420px;
  float: right;
  background-color: blanchedalmond;
  margin: 15px 0px;
}

.in2_5 {
  width: 280px;
  height: 420px;
  float: left;
  background-color: greenyellow;
  margin: 0px 0px;
}

.in2_6 {
  width: 280px;
  height: 420px;
  float: left;
  background-color: brown;
  margin: 0px 25px;
}

.in2_7 {
  width: 280px;
  height: 420px;
  float: left;
  background-color: pink;
  margin: 0px 0px;
}

.in2_8 {
  width: 280px;
  height: 420px;
  float: right;
  background-color: blanchedalmond;
  margin: 0px 0px;
}

#under {
  width: 1200px;
  height: 436px;
  margin: 0 auto;
}

#u_1 {
  width: 288px;
  height: 420px;
  background-color: greenyellow;
  float: left;
}

#u_2 {
  width: 288px;
  height: 420px;
  background-color: brown;
  float: left;
  margin: 0px 15px;
}

#u_3 {
  width: 288px;
  height: 420px;
  background-color: #475669;
  float: left;
  margin-right: 15px;
}

#u_4 {
  width: 288px;
  height: 420px;
  background-color: aqua;
  float: right;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

#foot {
  width: 1200px;
  height: 200px;
  margin: 0 auto;
}

#foot_2 {
  width: 1200px;
  height: 280px;
  margin: 0 auto;
}

.f_1 {
  width: 292px;
  height: 200px;
  float: left;
}

.f_2 {
  width: 292px;
  height: 200px;
  float: left;
  margin: 0px 10px;
}

.f_3 {
  width: 292px;
  height: 200px;
  float: left;
}

.f_4 {
  width: 292px;
  height: 200px;
  float: right;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-table .el-table__cell {
  padding: 0;
}
</style>

<script>
export default {
  data () {
        return {
          activeIndex: '1',
          activeIndex2: '1',
          arr: ["https://www1.djicdn.com/cms/uploads/aa1813833a028897f1cb6b40f914b72f.jpg",
            "https://www1.djicdn.com/cms/uploads/2d2b72891abfb38a4fc5c0bd6476f2f4.jpg"],
          categoryArr: [],
          bannerArr: [],
          productArr: [],
          wd: ""
        };

      },
  created() {
    //发请求获取所有商品信息
    let url = "http://localhost:8080/goods/list"
    this.axios.get(url).then((response) => {
      this.productArr = response.data.data;
      console.log("商品list")
    })
    //发请求获取所有轮播图
      let urlBanner = "http://localhost:8080/banner/select"
      this.axios.get(urlBanner).then((response) => {
        this.bannerArr = response.data.data;
      })
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    cart() {
      location.href = "http://localhost:8081/product/detail";
    }
  }
}
</script>